<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function tranDataToTreeData(arr){
     
          const mapObj={}  // 方便根据数据的关系找数据
          // 需求将 数据转换成 树状的数据
          arr.forEach(item=>{
            console.log(item,'item');
            if(!item.children){
              item.children=[]
            }
            // 往映射对象添加数据：取出每一个item对象的id作为映射对象的key，值就是当前的item对象
            mapObj[item.id]=item
          })
          console.log(mapObj,'mapObj')

          // 具体实现树形数据的转化
          const newArr=[]  // 保存树形的数据
          arr.forEach(item=>{
            // 根据数据的父子级关系，找到父级的数据
            const parent=mapObj[item.pid]
            // parent 如果是undefind，就说明item没有父级是一级的数据
            // parent 如果有值 就说明 item 是一个二级或三级数据 parent保存的是父级对象
            if(parent){
              parent.children.push(item)
            }else {
              // parent 如果是undefind ， 就说明item 没有父级就是一级数据
              newArr.push(item)
            }
          })
          return newArr
    }
     console.log(tranDataToTreeData(arr) ,'1');     
       
  </script>
</body>
</html>